<template>
  <div class="user-orders-page">
    <h1>我的订单</h1>

    <!-- 搜索筛选 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.query" placeholder="订单号/商品名称" clearable />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
            <el-option label="待支付" value="待支付"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="待入住" value="待入住"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
            <el-option label="已退房" value="已退房"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-tabs v-model="activeTab" class="order-tabs">
      <el-tab-pane label="购物订单" name="shopping">
        <div class="order-list">
          <el-card v-for="order in filteredShoppingOrders" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-title">{{ order.title }}</span>
              <el-tag :type="getOrderStatusType(order.status)">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>订单号：{{ order.id }}</p>
              <p>金额：¥{{ order.amount }}</p>
              <p>日期：{{ order.date }}</p>
            </div>
            <div class="order-actions">
              <el-button type="primary" size="small" @click="viewOrderDetails(order, 'shopping')">查看详情</el-button>
            </div>
          </el-card>
          <el-empty v-if="filteredShoppingOrders.length === 0" description="暂无购物订单"></el-empty>
        </div>
      </el-tab-pane>

      <el-tab-pane label="租房订单" name="rental">
        <div class="order-list">
          <el-card v-for="order in filteredRentalOrders" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-title">{{ order.title }}</span>
              <el-tag :type="getOrderStatusType(order.status)">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>订单号：{{ order.id }}</p>
              <p>租金：¥{{ order.amount }}/月</p>
              <p>房源：{{ order.houseLocation }}</p>
              <p>租期：{{ order.rentalPeriod }}</p>
              <p>日期：{{ order.date }}</p>
            </div>
            <div class="order-actions">
              <el-button type="primary" size="small" @click="viewOrderDetails(order, 'rental')">查看详情</el-button>
            </div>
          </el-card>
          <el-empty v-if="filteredRentalOrders.length === 0" description="暂无租房订单"></el-empty>
        </div>
      </el-tab-pane>

      <el-tab-pane label="酒店订单" name="hotel">
        <div class="order-list">
          <el-card v-for="order in filteredHotelOrders" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-title">{{ order.title }}</span>
              <el-tag :type="getOrderStatusType(order.status)">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>订单号：{{ order.id }}</p>
              <p>酒店：{{ order.hotelName }}</p>
              <p>入住日期：{{ order.checkInDate }}</p>
              <p>离店日期：{{ order.checkOutDate }}</p>
              <p>金额：¥{{ order.amount }}</p>
              <p>日期：{{ order.date }}</p>
            </div>
            <div class="order-actions">
              <el-button type="primary" size="small" @click="viewOrderDetails(order, 'hotel')">查看详情</el-button>
            </div>
          </el-card>
          <el-empty v-if="filteredHotelOrders.length === 0" description="暂无酒店订单"></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('shopping')

const searchForm = ref({
  query: '',
  dateRange: [],
  status: ''
})

// 模拟购物订单数据
const shoppingOrders = ref([
  {
    id: 'S20240401001',
    title: '智能手表 x 1',
    amount: 999.00,
    status: '已完成',
    date: '2024-04-01 10:30:00',
    details: '商品型号：XYZ-100，颜色：黑色'
  },
  {
    id: 'S20240325002',
    title: '无线耳机 x 1',
    amount: 699.00,
    status: '待支付',
    date: '2024-03-25 14:00:00',
    details: '请尽快完成支付'
  },
  {
    id: 'S20240318003',
    title: '智能音箱 x 1',
    amount: 399.00,
    status: '已取消',
    date: '2024-03-18 09:15:00',
    details: '用户主动取消订单'
  }
])

// 模拟租房订单数据
const rentalOrders = ref([
  {
    id: 'R20240405001',
    title: '两室一厅公寓',
    amount: 3500,
    status: '进行中',
    date: '2024-04-05 16:00:00',
    houseLocation: '和平区金都苑',
    rentalPeriod: '2024-05-01 至 2025-04-30',
    details: '已签订合同，租金按月支付'
  },
  {
    id: 'R20240330002',
    title: '单间合租房',
    amount: 1200,
    status: '已完成',
    date: '2024-03-30 11:45:00',
    houseLocation: '铁西区青年大街',
    rentalPeriod: '2024-04-01 至 2024-09-30',
    details: '租期已结束'
  }
])

// 模拟酒店订单数据
const hotelOrders = ref([
  {
    id: 'H20240410001',
    title: '豪华大床房 x 1晚',
    amount: 688.00,
    status: '待入住',
    date: '2024-04-10 09:00:00',
    hotelName: '沈阳香格里拉大酒店',
    checkInDate: '2024-05-01',
    checkOutDate: '2024-05-02',
    details: '预订成功，请凭身份证办理入住'
  },
  {
    id: 'H20240315002',
    title: '商务双床房 x 2晚',
    amount: 1200.00,
    status: '已完成',
    date: '2024-03-15 13:00:00',
    hotelName: '沈阳希尔顿酒店',
    checkInDate: '2024-04-05',
    checkOutDate: '2024-04-07',
    details: '已成功退房'
  },
  {
    id: 'H20240301003',
    title: '经济单人房 x 1晚',
    amount: 280.00,
    status: '已取消',
    date: '2024-03-01 18:30:00',
    hotelName: '沈阳如家酒店',
    checkInDate: '2024-03-10',
    checkOutDate: '2024-03-11',
    details: '因行程变更取消预订'
  }
])

const applyFilters = (orders, isHotel = false) => {
  let filtered = orders

  // 关键词过滤：订单号或商品名称/酒店名称
  if (searchForm.value.query) {
    const query = searchForm.value.query.toLowerCase()
    filtered = filtered.filter(order =>
      order.id.toLowerCase().includes(query) ||
      order.title.toLowerCase().includes(query) ||
      (isHotel && order.hotelName.toLowerCase().includes(query))
    )
  }

  // 日期范围过滤
  if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
    const [startDate, endDate] = searchForm.value.dateRange
    filtered = filtered.filter(order => {
      const orderDate = order.date.split(' ')[0]
      return orderDate >= startDate && orderDate <= endDate
    })
  }

  // 状态过滤
  if (searchForm.value.status) {
    filtered = filtered.filter(order => order.status === searchForm.value.status)
  }

  return filtered
}

const filteredShoppingOrders = computed(() => {
  return applyFilters(shoppingOrders.value)
})

const filteredRentalOrders = computed(() => {
  return applyFilters(rentalOrders.value)
})

const filteredHotelOrders = computed(() => {
  return applyFilters(hotelOrders.value, true)
})

const getOrderStatusType = (status) => {
  switch (status) {
    case '已完成':
    case '已入住':
    case '已退房':
      return 'success'
    case '进行中':
    case '待支付':
    case '待入住':
      return 'warning'
    case '已取消':
      return 'info'
    default:
      return ''
  }
}

const handleSearch = () => {
  // 触发 computed 属性重新计算
}

const resetSearch = () => {
  searchForm.value = {
    query: '',
    dateRange: [],
    status: ''
  }
}

const viewOrderDetails = (order, type) => {
  ElMessage.info(`查看${type}订单详情：${order.id} (功能待完善)`)
  // 可以在这里添加路由跳转逻辑，例如 router.push(`/user/orders/${type}/${order.id}`)
}
</script>

<style scoped>
.user-orders-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

h1 {
  font-size: 26px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

.order-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.order-list {
  padding: 20px 0;
}

.order-card {
  margin-bottom: 15px;
  border-radius: 8px;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .order-title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }
  }
  .order-details {
    font-size: 14px;
    color: #606266;
    p {
      margin: 5px 0;
    }
  }
  .order-actions {
    text-align: right;
    margin-top: 10px;
  }
}
</style> 